<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<body>
	省份：
	<select id="province"  onchange="selectCity(this)" >
		<option>--请选择--</option>
		<option value="001">山东省</option>
		<option value="002">江苏省</option>
		<option value="003">浙江省</option>
	</select>
	城市：
	<select id="city"  onchange="selectArea(this)" >
		<option>--请选择--</option>
		<option value="001">青岛</option>
		<option value="002">烟台</option>
		<option value="003">济南</option>
	</select>
	区县：
	<select id="area" >
		<option>--请选择--</option>
		<option value="001">市北区</option>
		<option value="002">市南区</option>
		<option value="003">崂山区</option>
	</select>

	<script src="js/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {
		$.post(
			"${pageContext.request.contextPath}/selectArea?method=selectProvince",
			function(data) {
				console.log(data);
				var html = "<option>--请选择--</option>";
				/* <option value="001">山东省</option> */
				for(var i = 0; i < data.length; i++) {
					// html += "<option value='001'>山东省</option>";
					html += "<option value='" + data[i].id + "'>" + data[i].province + "</option>";
				}
				
				$("#province").html(html); // innerHtml
			},
			"json"
		);
	});// 省
	
	// this代表选中的<option value="001">市北区</option>标签对象
	function selectCity(obj) {
		// 清空区县下面原来的内容
		$("#area option:gt(0)").remove();
		
		// var provinceId = obj.value;
		var provinceId = $(obj).val();
		$.post(
			"${pageContext.request.contextPath}/selectArea?method=selectCity",
			{"provinceId" : provinceId},
			function(data) {
				console.log(data);
				var html = "<option>--请选择--</option>";
				for(var i = 0; i < data.length; i++) {
					html += "<option value='" + data[i].id + "'>" + data[i].city + "</option>";
				}
				
				$("#city").html(html); // innerHtml
			},
			"json"
		);
	}
	
	function selectArea(obj) {
		// var provinceId = obj.value;
		var cityId = $(obj).val();
		$.post(
			"${pageContext.request.contextPath}/selectArea?method=selectArea",
			{"cityId" : cityId},
			function(data) {
				console.log(data);
				var html = "<option>--请选择--</option>";
				for(var i = 0; i < data.length; i++) {
					html += "<option value='" + data[i].id + "'>" + data[i].area + "</option>";
				}
				
				$("#area").html(html); // innerHtml
			},
			"json"
		);
	}
	</script>
	
</body>
</html>